<!DOCTYPE html>
<html lang="en">
<head>
<title>huangliusong</title>
<script src="./vue.js"></script>
</head>
 
<body>
	<div id="root">
		<counter ref="one" @change="handleChange"></counter>
		<counter ref="two" @change="handleChange"></counter>
		<div>
			{{total}}
		</div>
	</div>

	<script type="text/javascript">
		Vue.component('counter',{
			template:"<div @click='handleClick'>{{number}}</div>",
			data:function(){
				return {
					number:0
				}
			},
			methods:{
				handleClick:function(){
					this.number++;
					this.$emit('change')
				}
			}
		})
		var vm=new Vue({
			el:"#root",
			data:{
				total:0
			},
			methods:{
				handleChange:function(){
					this.total=this.$refs.one.number+this.$refs.two.number
				}
			}		
		})
	</script>
</body>

</html>